<template>
  <view class="publish-moment">
    <u-form :model="form" ref="form">
      <u-form-item label="内容" prop="content">
        <u-input v-model="form.content"  type="textarea" placeholder="分享你的生活..."></u-input>
      </u-form-item>
      
      <u-form-item label="图片" prop="images">
        <u-upload :fileList="form.images"  @afterRead="afterRead" @delete="deleteImage"></u-upload>
      </u-form-item>
    </u-form>
    
    <u-button type="primary" @click="handleSubmit">发布</u-button>
    <u-button @click="$emit('cancel')">取消</u-button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        content: '',
        images: []
      }
    }
  },
  methods: {
    afterRead(event) {
      // 这里应该是上传图片到服务器的逻辑
      // 示例中只是添加到本地列表
      this.form.images.push({ 
        url: event.file.url, 
        status: 'uploading',
        message: '上传中'
      })
      
      // 模拟上传完成
      setTimeout(() => {
        const index = this.form.images.findIndex(item  => item.url  === event.file.url) 
        this.form.images[index].status  = 'success'
        this.form.images[index].message  = '上传成功'
      }, 1500)
    },
    deleteImage(index) {
      this.form.images.splice(index,  1)
    },
    handleSubmit() {
      if (!this.form.content  && this.form.images.length  === 0) {
        this.$u.toast(' 请填写内容或上传图片')
        return
      }
      
      this.$emit('submit', this.form.content,  this.form.images.map(img  => img.url)) 
      this.form  = {
        content: '',
        images: []
      }
    }
  }
}
</script>